<template>
  <h1>月销售统计</h1>
  <div>
    <div style="margin: 30px">
      销售年份： <el-select v-model="year" style="width: 120px;margin-right:40px">
      <el-option
          v-for="item in yearList"
          :key="item"
          :label="item"
          :value="item">
      </el-option>
    </el-select>
      <el-button type="primary" @click="selectValue">查询</el-button>
    </div>
    <div id="moreColumn" style="width: 1000px;height: 400px;margin-top: 150px"></div>

  </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from "axios";
export default {
  data() {
    return {
      yearList:[],
      year:"请选择年份",
      echartsValue:[]
    }
  },
  methods: {
    //无参，直接查询年份
    selectYear(){
      console.log("year")
        axios.get("/project/echarts/selectYear").then(resp =>{
          this.yearList = resp.data;
          this.year = this.yearList[0]
          this.selectValue()
        })
    },
    //通过年份查询当年销售情况
    selectValue(){
      this.echartsValue=[]
      axios.get("/project/echarts/selectMonthValue",{params:{
        year:this.year
        }}).then(resp =>{
        this.echartsValue = resp.data;
        this.initCharts()

      })
    },
    initCharts() {
      var yourChart = echarts.init(document.getElementById('moreColumn'));
      let option = {
        legend: {},
        tooltip: {},
        dataset: {
          source: this.echartsValue
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
      };
      yourChart.setOption(option);
    }
  },

  mounted() {
    this.selectYear()
  }
}
</script>

<style scoped>
#moreColumn{
  margin: 30px;
}
</style>